<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left">
      <el-form-item label="巡更点名称">
        <el-input v-model="formInline.name"></el-input>
      </el-form-item>
      <el-form-item label="巡更点编号">
        <el-input v-model="formInline.num"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getpatrolcollocate">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="addpatrolcollocate">新增</el-button>
      </el-form-item>
    </el-form>
    <br>
    <div style="float: left; width: 15%">
      <button @click="num">全部</button>
      <el-tree :data="data" ref="houseinf" node-key="id" :props="defaultProps" default-expand-all
        @node-click="handleNodeClick"></el-tree>
    </div>
    <div style="float: left; width: 85%">
      <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 85%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column prop="id" label="序号" align="center"> </el-table-column>
        <el-table-column prop="name" label="巡更点名称" align="center"> </el-table-column>
        <el-table-column prop="num" label="巡更点编号" align="center"> </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"> </el-table-column>
        <el-table-column label="巡更二维码" align="center">
          <span slot-scope="scope">
            <el-link type="primary" @click="creatQrCode(scope.row.num)">查看</el-link>
            <el-button type="text">打印</el-button>
          </span>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link type="warning" @click="updatepatrolcollocate(scope.row)">编辑</el-link>
            <el-link type="danger" @click="delpatrolcollocate(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="formInline.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="count">
      </el-pagination>
    </div>

    <el-dialog title="新增" :visible.sync="dialogaddVisible" width="30%">
      <el-form :model="formData">
        <el-form-item label="巡更点编号" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="formData.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="巡更点名称" :label-width="formLabelWidth">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼栋楼层" :label-width="formLabelWidth">
          <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="postpatrolcollocate">保存</el-button>
        <el-button type="primary" @click="dialogaddVisible = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogputVisible" width="30%">
      <el-form :model="formData">
        <el-form-item label="巡更点编号" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="formData.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="巡更点名称" :label-width="formLabelWidth">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼栋楼层" :label-width="formLabelWidth">
          <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="putpatrolcollocate">保存</el-button>
        <el-button type="primary" @click="dialogputVisible = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="二维码" :visible.sync="dialogTableVisible" width="400px">
      <div class="qrcode divqr" ref="qrCodeUrl"></div>
    </el-dialog>
  </div>
</template>
<script>
import $ from "jquery";
import QRCode from "qrcodejs2";
import {
  gethouseinfoapi,
  getpatrolcollocateapi,
  deletepatrolcollocateapi,
  getnumapi,
  postpatrolcollocateapi,
  gethouseinfoselapi,
  putpatrolcollocateapi,
} from "@/api/safeManage/PatrolCollocate";
export default {
  data() {
    return {
      data: [],
      defaultProps: {},
      tableData: [],
      formInline: {
        pageIndex: 1,
        pageSize: 10,
        name: "",
        num: "",
        pid: 0,
      },
      value: [],
      count: 0,
      dialogaddVisible: false,
      dialogputVisible: false,
      dialogTableVisible: false,
      formLabelWidth: "120px",
      formData: {
        id: 0,
        houseId: 0,
        num: "",
        name: "",
        remark: "",
      },
      options: [],
    };
  },
  methods: {
    creatQrCode(row) {
      this.dialogTableVisible = true;
      $(".qrcode").html("");
      setTimeout(() => {
        new QRCode(this.$refs.qrCodeUrl, {
          text: row, // 需要转换为二维码的内容
          width: 260,
          height: 260,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }, 0);
    },
    gethouseinfo() {
      gethouseinfoapi().then((res) => {
        this.data = res.data;
      });
    },
    handleNodeClick(val) {
      this.formInline.pid = val.id;
      this.getpatrolcollocate();
    },
    num() {
      this.formInline.pid = 0;
      this.getpatrolcollocate();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getpatrolcollocate() {
      getpatrolcollocateapi(this.formInline).then((res) => {
        this.tableData = res.data.data;
        this.count = res.data.totalCount;
      });
    },
    handleChange(value) {
      console.log(value);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.getpatrolcollocate();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageIndex = val;
      this.getpatrolcollocate();
    },
    resetForm() {
      this.formInline.name = "";
      this.formInline.num = "";
    },
    delpatrolcollocate(row) {
      if (confirm("记录数据删除将无法恢复，确认删除吗？")) {
        deletepatrolcollocateapi(row).then((res) => {
          if (res.data.message == "操作成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getpatrolcollocate();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      }
    },
    addpatrolcollocate() {
      (this.formData = {
        id: 0,
        houseId: 0,
        num: "",
        name: "",
        remark: "",
      }),
        (this.value = []);
      this.dialogaddVisible = true;
      getnumapi().then((res) => {
        this.formData.num = res.data;
      });
      gethouseinfoselapi().then((res) => {
        this.options = res.data;
      });
    },
    postpatrolcollocate() {
      this.formData.houseId = this.value[this.value.length - 1];
      postpatrolcollocateapi(this.formData).then((res) => {
        if (res.data.message == "操作成功") {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.getpatrolcollocate();
          this.dialogaddVisible = false;
        } else {
          this.$message({
            message: "保存失败",
            type: "error",
          });
        }
      });
    },
    updatepatrolcollocate(row) {
      this.dialogputVisible = true;
      this.formData = row;
      gethouseinfoselapi().then((res) => {
        this.options = res.data;
      });
      this.value = this.formData.houseId;
    },
    putpatrolcollocate() {
      this.formData.houseId = this.value[this.value.length - 1];
      putpatrolcollocateapi(this.formData).then((res) => {
        if (res.data.message == "操作成功") {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.getpatrolcollocate();
          this.dialogputVisible = false;
        } else {
          this.$message({
            message: "保存失败",
            type: "error",
          });
        }
      });
    },
  },
  created() {
    this.gethouseinfo();
    this.getpatrolcollocate();
  },
};
</script>
<style scoped>
.divqr {
  margin: 50px;
  text-align: center;
}
</style>